<template>
  <div class="enterprise-manager" id="enterprise-manager">
    <div class="left">
      <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>

    <div class="right">
      <a-tabs default-active-key="1" @change="callback" size="large">
        <a-tab-pane key="1" tab="选择角色人员"> </a-tab-pane>
        <a-tab-pane key="2" tab="设置功能权限"> </a-tab-pane>
        <a-tab-pane key="3" tab="设置数据权限"> </a-tab-pane>
      </a-tabs>
    </div>

    <a-modal
      :visible="visible"
      title="添加成员"
      :maskClosable="false"
      :confirm-loading="confirmLoading"
      okText="确定"
      cancelText="取消"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <el-form
        label-position="right"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item label="姓名：">
          <a-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="所属部门:">
          <el-space wrap :size="10">
            <a-select
              default-value="lucy"
              style="width: 280px"
              @change="handleChange"
            >
              <a-select-option value="jack"> Jack </a-select-option>
              <a-select-option value="lucy"> Lucy </a-select-option>
              <a-select-option value="disabled" disabled>
                Disabled
              </a-select-option>
              <a-select-option value="Yiminghe"> yiminghe </a-select-option>
            </a-select>
            <div style="cursor: pointer; color: #00796a">
              <i class="iconfont icon-jia"></i> 新建部门
            </div>
          </el-space>
        </el-form-item>
        <el-form-item label="角色:" size="small">
          <el-space wrap :size="10">
            <a-select
              default-value="lucy"
              style="width: 280px"
              @change="handleChange"
            >
              <a-select-option value="jack"> Jack </a-select-option>
              <a-select-option value="lucy"> Lucy </a-select-option>
              <a-select-option value="disabled" disabled>
                Disabled
              </a-select-option>
              <a-select-option value="Yiminghe"> yiminghe </a-select-option>
            </a-select>
            <div style="cursor: pointer; color: #00796a">
              <i class="iconfont icon-jia"></i> 新建角色
            </div>
          </el-space>
        </el-form-item>
        <el-form-item label="手机号:" size="small">
          <a-input v-model="formLabelAlign.type"></a-input>
        </el-form-item>
      </el-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          label: "办公室",
          children: [
            {
              label: "办公室 1-1",
              children: [
                {
                  label: "办公室 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "业务部",
          children: [
            {
              label: "业务部 2-1",
              children: [
                {
                  label: "业务部 2-1-1",
                },
              ],
            },
            {
              label: "业务部 2-2",
              children: [
                {
                  label: "业务部 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "营销部 3",
          children: [
            {
              label: "营销部 3-1",
              children: [
                {
                  label: "营销部 3-1-1",
                },
              ],
            },
            {
              label: "营销部 3-2",
              children: [
                {
                  label: "营销部 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      ModalText: "Content of the modal",
      visible: false,
      confirmLoading: false,
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel() {
      console.log("Clicked cancel button");
      this.visible = false;
    },
  },
};
</script>
<style lang="less" scoped>
.enterprise-manager {
  display: flex;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  .left {
    width: 200px;
    background-color: #fff;
    min-height: 100%;
    border-right: 0.5px solid #dcdfe6;
    position: relative;
  }
  .right {
    flex: 1;
    // background-color: gray;
    padding: 0 10px;
    position: relative;
  }
}
</style>